<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
    <title>行政划分</title>
    <link rel="stylesheet" type="text/css" href="../../leaflet/leaflet.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/map.css"/>
    <script src="../../leaflet/leaflet.js"></script>
    <script src="../../leaflet/leaflet.marker.highlight.js"></script>
    <link rel="stylesheet" type="text/css" href="../../leaflet/leaflet.marker.highlight.css"/>
</head>
<body>
<div id="map"></div>
<script src="../../js/mapSource.js"></script>
<script src="../../js/lib/jquery-3.2.1.min.js"></script>
<script src="../../js/layer.js"></script>
<script src="../../js/common.js"></script>
<script src="../../js/lib/echarts.common.min.js"></script>
<script>
    layerManager.setMap(map);
    layerManager.setBaseLayer(BaseLayers.getMapBoxUrl(), BaseLayers.getLayerDetails(0).id, BaseLayers.getToken());
    layerManager.addOverLayer(mapSource.AdDivision.url, mapSource.AdDivision.layer);
    layerManager.createOverLayer();

    map.on('click', function (e) {
        console.log(e.latlng);
    })

    map.fitBounds([[33.537437, 112.715096],
        [34.989103, 114.21727]]);


    var json = [{
        id: 'chart1',
        city: "巩义市",
        latLng: [34.68918447131509, 113.1369017623365],
        data: [25, 105,35,]
    }, {
        id: 'chart2',
        city: "荥阳市",
        latLng: [34.77044625349742, 113.35388174280526],
        data: [10, 121,20]
    }, {
        id: 'chart3',
        city: "新密市",
        latLng: [34.49473604036891, 113.4335326217115],
        data: [33,60, 40]
    }, {
        id: 'chart4',
        city: "登封市",
        latLng: [34.408672109621776, 113.04626455530526],
        data: [25, 80,3]
    }, {
        id: 'chart5',
        city: "中原区",
        latLng: [34.75740963726007, 113.54370117187501],
        data: [55, 90,14]
    }
    ];

    json.forEach(function (value) {
        createCharts(value.id,value.data,value.city,value.latLng);
    });

    function createCharts(id, data, title, point) {

        var myIcon = L.divIcon({
            className: 'my-div-icon', iconSize: [80, 80],
            html: "<div id='"+id+"' style='height: 80px;width: 80px;position:relative;background-color:transparent;'></div>"
        });
        L.marker(point, {
            icon: myIcon
        }).addTo(map);

        var myChart = echarts.init(document.getElementById(
            id
        ));
        // 指定图表的配置项和数据
        var option = {
            title: {
                show:false,
                text: title
            },
            tooltip: {},
            legend: {
                show: false
            },
            xAxis: {
                data: ["报警","正常", "故障"]
            },
            yAxis: {
                show: false
            },
            series: [{
                name: '报警',
                type: 'bar',
                barWidth: 10,
                data: data,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList = ['#FF0000', '#00FF00', '#0000FF'];
                            return colorList[params.dataIndex];
                        }
                    }
                }
            }],

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart.resize();
    }


</script>
</body>
</html>